<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons'; // echarts theme
import resize from './mixins/resize';

const animationDuration = 6000;

const className = ref('chart');
const width = ref('100%');
const height = ref('300px');
let chart = null;

onMounted(() => {
  initChart();
});

onBeforeUnmount(() => {
  if (!chart) {
    return;
  }
  chart.dispose();
  chart = null;
});

function initChart() {
  chart = echarts.init(document.querySelector('.chart'), 'macarons');

  chart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 10,
      left: '48%',
      right: '2%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周七'],
      axisTick: {
        alignWithLabel: true
      }
    }],
    yAxis: [{
      type: 'value',
      axisTick: {
        show: false
      }
    }],
    series: [{
      name: 'A类',
      type: 'bar',
      stack: 'vistors',
      barWidth: '60%',
      data: [79, 52, 200, 334, 390, 330, 220],
      animationDuration
    }, {
      name: 'B类',
      type: 'bar',
      stack: 'vistors',
      barWidth: '60%',
      data: [80, 52, 200, 334, 390, 330, 220],
      animationDuration
    }, {
      name: 'C类',
      type: 'bar',
      stack: 'vistors',
      barWidth: '60%',
      data: [30, 52, 200, 334, 390, 330, 220],
      animationDuration
    }]
  });
}
</script>
